
<!-- 维修人员管理 -->
<template>
  <div class="page">
    <div class="nuclein-query">
      <div>维修人员管理</div>
      <div style="margin-left: auto;">
        <el-button v-if="commonFunction.hasPermission('sys:household:secret')" size="small" @click="viewDetail"><i
            class="el-icon-view"></i>
        </el-button>
        <!-- <el-button size="mini" type="primary" @click="handlerIssueWorkOrder()">下发工单</el-button> -->
        <el-button size="mini" type="primary" @click="handlerAdd()">添加</el-button>
      </div>
    </div>
    <div class="content-row">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="维修人员名称" align="center">
          <template slot-scope="scope">
            <!-- 加密 -->
            <span>
              {{ (showViewDetail ? scope.row.userName : commonFunction.hideName(scope.row.userName)) }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="userCard" label="身份证号码" align="center">
          <template slot-scope="scope">
            <span>
              {{ (showViewDetail ? scope.row.userCard : commonFunction.hideName(scope.row.userCard)) }}
            </span>
          </template>
        </el-table-column> -->
        <el-table-column label="联系电话" align="center">
          <template slot-scope="scope">
            <!-- 加密 -->
            <span>
              {{ (showViewDetail ? scope.row.userModel : commonFunction.hideName(scope.row.userModel)) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="所在小区" align="center">
          <template slot-scope="scope">
            {{ scope.row.estateText }}
          </template>
        </el-table-column>
        <el-table-column prop="createDateText" label="添加时间" align="center">
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 表单弹出框 -->
    <div>
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="维修人员名称" prop="userName">
            <el-input v-model="ruleForm.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="维修人员身份证" prop="userCard">
            <el-input v-model="ruleForm.userCard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="userModel">
            <el-input v-model="ruleForm.userModel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="userEmail">
            <el-input v-model="ruleForm.userEmail" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="小区名称">
            <el-select v-model="ruleForm.estateId" placeholdder="请选择小区" size="small">
              <el-option v-for="item in estateIdList" :key="item.estateId" :label="item.estateName"
                :value="item.estateId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { maintenance, maintenanceAddEtid, maintenanceDel, getEstate } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {

  data () {
    return {
      dialogFormVisible: false,
      title: '添加',
      total: 10,
      page: 1,
      limit: 10,
      tableData: [],
      estateIdList: [],
      showViewDetail: false, // 是否加密
      ruleForm: {
        userName: '',
        userCard: '',
        estateId: '',
        userModel: '',
        userEmail: ''
      },
      rules: {
        userName: { required: true, message: '请输入维修人员名称', trigger: 'blur' },
        estateId: { required: true, message: '请选择小区', trigger: 'chage' },
        userCard: [
          { required: true, message: '身份证不能为空', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '无效卡号,请重新输入', trigger: 'blur' }],
        userModel: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请正确输入联系方式', trigger: 'blur' }],
        userEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/, message: '请输入合法的邮箱', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getDeviceId()
    setTimeout(() => {
      this.gitList()
    }, 100)
  },
  methods: {
    // 获取
    gitList () {
      const data = {
        page: this.page,
        size: this.limit
      }
      maintenance({ ...data }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.tableData = records.map(item => {
            let estateText
            const createDateText = commonFunction.getTimeFormat(+new Date(item.createDate), 'YYYY-MM-DD hh:mm:ss')
            this.estateIdList.forEach(it => {
              if (item.estateId == it.estateId) {
                estateText = it.estateName
              }
            })
            return {
              ...item,
              createDateText,
              estateText
            }
          })
          this.total = total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取小区ID
    getDeviceId () {
      getEstate().then(res => {
        this.estateIdList = res.list
      })
    },
    // 提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            userId: this.ruleForm.userId ? this.ruleForm.userId : null,
            userName: this.ruleForm.userName,
            userCard: this.ruleForm.userCard,
            estateId: this.ruleForm.estateId,
            userModel: this.ruleForm.userModel,
            userEmail: this.ruleForm.userEmail
          }
          maintenanceAddEtid(data).then(res => {
            if (res.code == 0) {
              this.$message.success(data.userId ? '编辑成功' : '添加成功')
              this.gitList()
              this.dialogFormVisible = false
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    /**
     * 下发工单
    */
    handlerIssueWorkOrder () {

    },
    handlerAdd () {
      this.ruleForm = {
        // 小区id
        userName: '',
        userCard: '',
        estateId: '',
        userModel: '',
        userEmail: ''
      },
      this.title = '添加'
      this.dialogFormVisible = true
    },
    // 加密/解密
    viewDetail () {
      this.showViewDetail = !this.showViewDetail
    },
    // 编辑
    handleEdit (row) {
      this.title = '编辑'
      this.dialogFormVisible = true
      this.ruleForm = {
        ...row
      }
    },

    handleDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          userId: row.userId
        }
        maintenanceDel({ ...data }).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功')
            this.gitList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页
    handleSizeChange (val) {
      this.limit = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
  position: relative;
  height: 100%;
}

.nuclein-query {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #DCDFE6;
}

.content-row {
  overflow: hidden;
}

/* 分页 */
.pagination {
  width: 100%;
  padding: 20px;
  border-top: 1px solid #DCDFE6;
}
</style>
